<template>
  <div class="comanyList padding_20">
    <el-input v-model="searchParams.name"
              placeholder="请输入公司名称"
              class="w-200"
              clearable
              @clear="initTableData"/>
    <el-select v-model="searchParams.hospitalType"
               clearable
               class="w-200"
               placeholder="请选择性质"
               @change="changeNature">
      <el-option v-for="item in typeList"
                 :key="item.value"
                 :label="item.name"
                 :value="item.value"></el-option>
    </el-select>
    <el-select v-model="searchParams.status"
               clearable
               class="w-200"
               placeholder="请选择状态"
               @change="changeStatus">
      <el-option v-for="item in statusList"
                 :key="item.value"
                 :label="item.name"
                 :value="item.value"></el-option>
    </el-select>
    <el-button type="primary"
               @click="initTableData">查 询
    </el-button>
    <el-button type="primary"
               @click="handleAdd">新 增
    </el-button>
    <el-button type="warning"
               @click="initCompanyHospitalLocation">初始化活动网点
    </el-button>
    <el-button type="warning"
               @click="initEnabledCDPHospitals">初始化已开通网点
    </el-button>
    <el-button type="warning"
               @click="initNewEnabledCDPHospitals">初始化一个月内开通网点
    </el-button>
    <Table border
           stripe
           :columns="columns"
           :data="dataList"
           :loading="loading"
           class="mt-20">
      <template slot-scope="{ row }"
                slot="action">
        <span @click="handleEdit(row)">编辑</span>
        <!-- <span @click="handleDel(row)">删除</span> -->
        <span type="text"
              @click="handleChangeStatus(row, 0)"
              v-if="row.status === 1">封禁</span>
        <span type="text"
              @click="handleChangeStatus(row, 1)"
              v-if="row.status === 0">开启</span>
        <span type="text"
              @click="handleDeviceManage(row)">设备管理</span>
        <span type="text"
              @click="handleBranch(row)">分店管理</span>
        <span type="text"
              @click="handleVipService(row)">特享VIP服务</span>
        <span type="text"
              @click="handleSlowManage(row)">慢病服务医院管理</span>
        <span type="text"
              @click="handleConfig(row)">自选类配置</span>
        <span type="text"
              @click="handleUpdateAccout(row)">修改账户密码</span>
      </template>
    </Table>
    <Page :current.sync="currentPage"
          :total="totals"
          ref="page"
          :page-size="pageSize"
          @on-change="initTableData"
          show-total/>
    <company-dialog :companyDialog="companyDialog"
                    v-if="isShowDialog"
                    :visible.sync="isShowDialog"></company-dialog>

    <!-- 设备管理 -->
    <device-manage :deviceManage="deviceManageObj"
                   v-if="isDeviceManage"
                   :visible.sync="isDeviceManage"></device-manage>

    <!-- vip -->
    <vip-dialog :dataObj="dataObj"
                v-if="showVipDialog"
                :visible.sync="showVipDialog"></vip-dialog>
    <!-- 慢病服务医院管理 -->
    <slow-dialog :dataObj="dataObj"
                 v-if="showSlowHospitalDialog"
                 :visible.sync="showSlowHospitalDialog"></slow-dialog>
    <!-- 自选类配置 -->
    <config-dialog :dataObj="dataObj"
                   v-if="showOptionalConfigDialog"
                   :visible.sync="showOptionalConfigDialog"></config-dialog>

    <!-- 账户修改 -->
    <account-dialog :dataObj="dataObj"
                   v-if="showAccountDialog"
                   :visible.sync="showAccountDialog"></account-dialog>
  </div>
</template>

<script>

import deviceManage from './deviceMange'
import companyDialog from './companyDialog'
import vipDialog from './vipDialog'
import slowHospitalManageDialog from './slowHospitalManageDialog'
import optionalConfigDialog from './optionalConfigDialog'
import accountDialog from "./accountDialog";

export default {
  name: "comanyList",
  data() {
    return {
      showVipDialog: false,
      showSlowHospitalDialog: false,
      showOptionalConfigDialog: false,
      showAccountDialog: false,
      dataObj: {},
      columns: [
        {
          title: "图片",
          key: "image",
          // width: 95,
          render: (h, params) => {
            return h("div", [
              h("img", {
                attrs: {
                  src: params.row.imageUrl,
                  preview: "comanyList"
                },
                style: {
                  width: "60px",
                  height: "60px",
                  "border-radius": "50%"
                }
              })
            ]);
          }
        },
        {
          title: "公司名称",
          key: "name"
        },
        {
          title: "法人姓名",
          key: "legalName"
        },
        {
          title: "联系方式",
          key: "phone"
        },
        {
          title: "下辖门店数",
          key: "branchAccountCount"
        },
        {
          title: "类型",
          key: "hospitalType",
          render: (h, params) => {
            if (params.row.hospitalType == 1) {
              return h("div", [h("span", {}, "药店")]);
            } else if (params.row.hospitalType == 2) {
              return h("div", [h("span", {}, "诊所")]);
            } else {
              return h("div", [h("span", {}, "")]);
            }
          }
        },
        {
          title: "合作状态",
          key: "status",
          render: (h, params) => {
            if (params.row.status == 1) {
              return h("div", [h("span", {}, "正常")]);
            } else if (params.row.status == 0) {
              return h("div", [h("span", {}, "封禁")]);
            } else {
              return h("div", [h("span", {}, "")]);
            }
          }
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 340
        }
      ],
      dataList: [],
      currentPage: 1,
      pageSize: 20,
      searchParams: {
        name: "",
        status: "", // 状态
        hospitalType: "" // 性质
      },
      loading: true,
      totals: 0,
      isDeviceManage: false, // 是否显示设备管理
      deviceManageObj: {},
      isShowDialog: false,  // B端管理添加、编辑弹窗
      companyDialog: {},
      typeList: [
        {value: 1, name: '药店'},
        {value: 2, name: '诊所'},
      ],
      statusList: [
        {value: 0, name: '封禁'},
        {value: 1, name: '正常'},
      ]
    };
  },
  created() {
    this.initTableData();
  },
  methods: {
    // 获取列表数据
    initTableData() {
      this.loading = true
      let pageIndex = this.currentPage - 1;
      if (this.searchParams.name && this.searchParams.name.trim() !== "") {
        pageIndex = 0;
      }
      let param = {
        pageSize: this.pageSize,
        pageIndex: pageIndex,
        ...this.searchParams
      };
      this.post(this.api.company.companyList, param).then(res => {
        if (res.data.code === '200') {
          this.loading = false
          this.dataList = res.data.object;
          this.totals = res.data.totalNum;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    // 公司性质
    changeNature(val) {
      this.searchParams.hospitalType = val;
      this.currentPage = 1;
      this.initTableData();
    },
    changeStatus(val) {
      this.searchParams.status = val;
      this.currentPage = 1;
      this.initTableData();
    },
    // 新增
    handleAdd() {
      this.isShowDialog = true;
      this.companyDialog = null;
    },
    // 编辑、详情
    handleEdit(row) {
      this.companyDialog = row;
      this.isShowDialog = true;
    },
    // 删除
    async handleDel(row) {
      const {data: res} = await this.post(this.api.company.delCompanty, {
        companyId: row.id
      });
      if (res.code !== "200") return this.$Message.error("删除失败!");
      this.$Message.error("删除成功!");
      this.initTableData();
    },
    // 封禁、开启
    async handleChangeStatus(row, currStatus) {
      let text = currStatus === 1 ? '开启' : '封禁'
      this.$confirm(`确认${text}？`)
        .then(async _ => {
          const {data: res} = await this.post(this.api.company.changeStatus, {
            companyId: row.id,
            status: currStatus
          });
          if (res.code === '200') {
            this.$Message.success(`${text}成功!`);
            this.initTableData();
          }
        })
        .catch(_ => {
        });
    },
    //
    handleDeviceManage(row) {
      this.isDeviceManage = true
      this.deviceManageObj = row
    },
    // 分店管理
    handleBranch(row) {
      this.$router.push({name: 'branch', query: {companyId: row.id}})
    },
    //特享VIP
    handleVipService(row) {
      this.showVipDialog = true
      this.dataObj = Object.assign({}, row)
    },
    //慢病服务医院管理
    handleSlowManage(row) {
      this.showSlowHospitalDialog = true
      this.dataObj = Object.assign({}, row)
    },
    //自选类配置
    handleConfig(row) {
      this.showOptionalConfigDialog = true
      this.dataObj = Object.assign({}, row)
    },
    //修改账户密码
    handleUpdateAccout(row){
      this.showAccountDialog=true
      this.dataObj = Object.assign({}, row)
    },
    //初始化网点
    initCompanyHospitalLocation() {
      this.post(this.api.company.initCompanyHospitalLocation).then((res) => {
        if (res.data.code === '200') {
          this.$message.success('初始化成功')
        }
      })
    },
    //初始化已开通网点
    initEnabledCDPHospitals() {
      this.post(this.api.company.initEnabledCDPHospitals).then((res) => {
        if (res.data.code === '200') {
          this.$message.success('初始化成功')
        }
      })
    },
    //初始化一个月内已开通网点
    initNewEnabledCDPHospitals() {
      this.post(this.api.company.initNewEnabledCDPHospitals).then((res) => {
        if (res.data.code === '200') {
          this.$message.success('初始化成功')
        }
      })
    },
  },
  components: {
    'device-manage': deviceManage,
    'company-dialog': companyDialog,
    'vip-dialog': vipDialog,
    'slow-dialog': slowHospitalManageDialog,
    'config-dialog': optionalConfigDialog,
    'account-dialog': accountDialog,
  }
};
</script>
<style lang="scss" scoped>
/deep/ .ivu-modal-fullscreen {
  width: 80% !important;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
</style>
